<template>
  <div class="charts-box">
    <el-empty v-if="emptyShow" description="暂无数据"></el-empty>
    <qiun-vue-ucharts :type="typeCharts" :opts="opts" v-else :chartData="chartData" />
    <div class="charts-num" v-if='allNum > 0'>总数量：{{allNum}}条</div>
  </div>
</template>

<script>
  import qiunVueUcharts from "@qiun/vue-ucharts";
  export default {
    components: {
      qiunVueUcharts,
    },
    data() {
      return {
        typeCharts: "line",
        allNum: 0,
        audioContext: null,
        chartData: {},
        opts: {
          color: [
            "#1890FF",
            "#91CB74",
            "#FAC858",
            "#EE6666",
            "#73C0DE",
            "#3CA272",
            "#FC8452",
            "#9A60B4",
            "#ea7ccc",
          ],
          padding: [15, 10, 0, 15],
          dataLabel: false,
          dataPointShape: false,
          enableScroll: false,
          legend: {},
          xAxis: {
            disableGrid: true,
          },
          yAxis: {
            gridType: "dash",
            dashLength: 2,
            // data: [
            //   {
            //     min: 0,
            //     max: 150,
            //   },
            // ],
          },
          extra: {
            line: {
              type: "curve",
              width: 2,
              activeType: "hollow",
              linearType: "custom",
            },
          },
        },
        emptyShow: true,
      };
    },
    mounted() {
      this.getServerData();
      // 必须在用户交互后初始化（如点击按钮）
      this.initAudio();
    },
    methods: {
      initAudio() {
        this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
      },
      getServerData() {
        const series = [];
        if (this.messageColumns == null) {
          this.allNum = 0;
          this.emptyShow = true;
          return;
        }
        this.allNum = this.messageColumns.allNum;
        for (let key in this.messageColumns.types) {
          series.push({
            name: key,
            textColor: "#FFFFFF",
            data: this.messageColumns.types[key],
          });
        }
        let res = {
          categories: this.messageColumns.days,
          series: series,
        };
        this.emptyShow = false;
        this.chartData = JSON.parse(JSON.stringify(res));
      },
    },
  };
</script>

<style scoped>
  .charts-box {
    width: 100%;
    height: 400px;
    margin: 0 auto;
    position: relative;
  }

  .charts-num {
    width: 66%;
    color: #666;
    text-align: right;
    position: absolute;
    top: -25px;
  }
</style>
